<template>
  <div :ref="info._id" v-ui-ref="vSetRef" :class="{ hidden: info.extension.hidden?.value || conditionProperty.hidden }">
    <p
      :class="[
        'p-' + info.extension.padding.value,
        info.extension.fontSize.value,
        info.extension.fontWeight.value,
        info.extension.textAlign.value,
        info.extension.underline.value ? 'underline' : 'no-underline',
      ]"
      :style="[{ fontSize: info.extension.fontSize.value, color: colorText }]"
    >
      {{ info.extension.textContent.value }}
    </p>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ConditionMixin } from '@ve/mixin'
  export default defineComponent({
    name: 'UiText',
    mixins: [UiMixin, RefsInjectMixin, ConditionMixin],
    computed: {
      colorText() {
        return this.info.extension.colorText?.value ? this.info.extension.colorText?.value : '#000'
      },
    },
  })
</script>
